<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.4/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="" lay-filter="departmentForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" id="cname" name="name" lay-verify="name" autocomplete="off" placeholder=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-inline" style="width:200px">
                <input type="text" id="ctel" name="tel" lay-verify="tel" autocomplete="off" placeholder=" "
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline" style="width:200px">
                <input type="text" id="caddress" name="address" lay-verify="address" autocomplete="off" placeholder=" "
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline" style="width:200px">
                <input type="text" id="cremark" name="remark" lay-verify="remark" autocomplete="off" placeholder=" "
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-form-item ">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline ">
                    <select id="part" name="part" lay-filter="partFilter">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-label">员工名称</div>
            <div class="layui-input-inline  ">
                <select id="emp" name="emp" lay-filter="empFilter">
                    <option value="">--请选择--</option>
                </select>
            </div>
        </div>
    </div>
</form>
<script src="../../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="application/javascript">

    layui.use(['form', 'table', 'layer'], function () {
        let $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        //初始化部门名称数据
        $.get({
            url: "/api/department/partList", success: (resp) => {
                resp.forEach(r => {
                    $("#part").append("<option value='" + r.pid + "'>" + r.pname + "</option>");
                });
                form.render('select');
            }, dataType: "json"
        });


        //部门名称select监听器
        form.on('select(partFilter)', (data) => {
            //部门id
            let pid = $('#part option:selected').val();
            if (!!pid) {
                $('.e-class').remove();
                $('.c-class').remove();
                $.get({
                    url: "/api/emp/" + pid + "", success: (resp) => {
                        resp.forEach(r => {
                            $("#emp").append("<option class='e-class' value='" + r.eid + "'>" + r.etruename + "</option>");
                        });
                        form.render('select');
                    }, dataType: "json"
                });

            }
        });
        //员工名称select监听器
        form.on('select(empFilter)', (data) => {
            //员工id
            let eid = $('#emp option:selected').val();
            let pid = $('#part option:selected').val();
            //根据员工id查询客户列表

            form.render('select');

        });

    })

    //   getValue属于window对象
    function aaa() {
        var cname = $("#cname").val();
        var ctel = $("#ctel").val();
        var caddress = $("#caddress").val();
        var cremark = $("#cremark").val();
        let pid = $('#part option:selected').val();
        let eid = $('#emp option:selected').val();

        var data = {"cname": cname, "ctel": ctel, "caddress": caddress, "cremark": cremark, "part": pid, "emp": eid}
        return data;
    }

</script>
</body>
</html>